<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css" />
  </head>
  <body>
    <input type="hidden" th:value="${token}" id="token">
    <div class="layui-inline">
      <button class="layui-btn layui-btn-primary layui-border-green" id="add" style="margin-left: 10px;">添加</button>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label"> <button class="layui-btn layui-btn-primary layui-border-orange"
          id="search">搜索</button></label>
      <div class="layui-form-label">
        <input type="text" name="title" autocomplete="off" class="layui-input" id="username" placeholder="请输入搜索用户名"
          style="margin-left: -30px;width: 300px;" lay-verify="title">
      </div>
    </div>
    <!-- <button class="layui-btn layui-btn-primary layui-border-green" id="add" style="margin-top: 10px;">添加</button> -->
    <table id="demo" lay-filter="test"></table>
    <script src="../static/jquery/jquery-3.6.0.min.js"></script>
    <script src="../static/layui/layui.js"></script>
    <script>
      console.log($('#token').val());
      layui.use('layer', function() {
        var layer = layui.layer;
        //添加
        $('#add').click(function() {
          //iframe窗
          layer.open({
            type: 2,
            title: '添加用户',
            content: ['http://localhost:8899/toAddUser?token=' + $('#token').val(), 'no'],
            btn: ['确定'],
            maxmin: true, //开启最大化最小化按钮
            area: ['400px', '500px'],
            success: function(layero, index) {},
            yes: function(index, layero) {
              //按钮【按钮一】的回调
              var body = layer.getChildFrame('body', index);
              body.find("#ok").click();
              console.log(body.html());
              setTimeout(function() {
                layer.close(index); //如果设定了yes回调，需进行手工关闭
              }, 1500);
            },
            cancel: function() {
              //右上角关闭回调
              //return false 开启该代码可禁止点击该按钮关闭
            }
          });
        });
      });
      layui.use('table', function() {
        var table = layui.table;
        //触发事件
        var active = {};
        //搜索数据
        $('#search').on('click', function(e) {
          console.log($('#username').val())
          table.reload('demo', {
            url: '/loadDataSearch',
            where: {
              "token": $('#token').val(),
              "username": $('#username').val()
            }
            //设定异步数据接口的额外参数
            ,
            height: 500
          });
        });
        //表格数据部分
        table.render({
          elem: '#demo',
          height: 312,
          url: '/loadData?token=' + $('#token').val(), //数据接口
          page: false, //开启分页
          cols: [
            [ //表头
              {
                field: 'userid',
                title: 'ID',
                width: 200,
                sort: true,
                fixed: 'left'
              }, {
                field: 'username',
                title: '用户名',
                width: 200
              }, {
                field: 'useremail',
                title: 'Email',
                width: 200
              }, {
                field: 'password',
                title: '密码',
                width: 200,
              }
            ]
          ]
        });
      });
    </script>
  </body>
</html>
